<!-- 基本资料内容文件 -->
<template>
  <div class="basicInfo" v-loading="loading" :element-loading-text="text">
    <!-- 标题 -->
    <div class="title">
      <h3>基本资料</h3>
    </div>
    <div class="box">
      <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px">
        <el-form-item label="登录名称">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="userInfo.nickname" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="userInfo.email" placeholder="请输入用户邮箱"></el-input>
        </el-form-item>
        <el-form-item class="btn-box">
          <!-- 提交按钮 -->
          <el-button class="addArticleColoe screen" size="medium" type="primary" @click="submit">提交修改</el-button>
          <!-- 重置按钮 -->
          <el-button class="reset" type="info" size="medium" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { PutUserInfo } from '@/api/user'
export default {
  name: 'basicInfo',
  created () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.loading = true
    this.$emit('setIndexisSHow', true)
    if (typeof store.state.user.userInfo === 'object') {
      this.userInfo = store.state.user.userInfo
      this.userInfo.nickname = ''
      this.userInfo.email = ''
    } else {
      this.userInfo = JSON.parse(store.state.user.userInfo)
      this.userInfo.nickname = ''
      this.userInfo.email = ''
    }
    // console.log(this.userInfo)
  },
  mounted () {
    this.loading = false
  },
  data () {
    return {
      loading: '',
      text: '页面加载中...',
      userInfo: {
        id: '', // 用户id
        username: '', // 用户名
        nickname: '', // 昵称
        email: '', // 邮箱
        user_pic: '' // 用户头像地址
      },
      rules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: ['change', 'blur'] }
        ],
        email: [
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请正确输入邮箱格式', trigger: ['blur', 'change'] },
          { required: true, message: '请输入用户邮箱', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    async submit () {
      this.text = '提交数据更新中,请稍等...'
      this.loading = true
      await this.$refs.userInfo.validate()
      const res = await PutUserInfo(this.userInfo)
      this.$message({
        message: res.data.message,
        type: 'success'
      })
      this.reset()
      this.loading = false
    },
    async reset () {
      await this.$refs.userInfo.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px 0px;
  height: 272px;
  background-color: #ffffff;
  border-radius: 0px 0px 4px 4px;
}

/deep/ .el-form-item {
  display: flex;
  align-items: center;

  .el-form-item__content {
    margin-left: 0px !important;

    .el-input__inner {
      width: 400px;
      height: 40px;
      line-height: 40px;
    }
  }

  /deep/ .el-form-item__label {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.90);
    line-height: 22px;
    font-weight: 400;
  }
}

.addArticleColoe {
  background: #4F81FF;
  border-radius: 3px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.90);
  text-align: center;
  font-weight: 400;
  border: 0px;
}

.addArticleColoe:hover {
  background: #608DFF;
}

.reset {
  background: #EAECF5;
  border-radius: 3px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #0052D9;
  text-align: center;
  font-weight: 400;
  border: 0px;
}

.btn-box {
  margin-left: 100px;
}
</style>
